<template>
  <div class="monitor-rule-threshold">
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <tag-content-header>
          <template #title>
            <span>区间/枚举值列表</span>
          </template>
        </tag-content-header>
        <tag-table
          ref="table"
          :data="params.tagConfigJson ? params.tagConfigJson.codeConfig : []"
          :columns="columns"
          :pagination="false"
          :loading="loading"
        >
          <template #operation="{ scope }">
            <div class="operation-button-box">
              <el-input-number
                v-model="scope.row.fluctuationThreshold"
                :min="0"
                :max="maxThreshold(scope.row)"
                :step="1"
                step-strictly
              ></el-input-number>
            </div>
          </template>
          <template #maxThreshold="{ scope }">
            1 - {{ maxThreshold(scope.row) }}
          </template>
        </tag-table>
      </div>
    </div>

    <div class="drawer-btns" v-loading="loading">
      <el-button @click="$emit('clearDrawer')">关闭</el-button>
      <el-button @click="$emit('prev')">上一步</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    drawerType: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      loading: false,
      columns: [
        {
          show: true,
          label: '区间/枚举值',
          prop: 'codeCd',
          align: 'center'
        },
        {
          show: true,
          label: '区间/枚举值描述',
          prop: 'codeDesc',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '波动阈值比例或个数',
          prop: 'operation',
          align: 'center',
          width: 200
        },
        {
          show: 'fixed',
          label: '波动阈值范围',
          prop: 'maxThreshold',
          align: 'center',
          width: 200
        }
      ],
      params: {},
      maxThresholdList: []
    }
  },
  methods: {
    init(params) {
      this.params = params
      this.getThreshold()
    },
    getThreshold() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('tag/tagDataBox/getTagFluctuateThreshold'),
        method: 'post',
        data: this.$ajax.setData({
          tagId: this.params.tagId,
          tagConfigJson: this.params.tagConfigJson
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          const thresholdList = JSON.parse(data.data.tagConfigJson)
          this.params.tagConfigJson.codeConfig.forEach((item, index) => {
            const target = thresholdList.find(ths => ths.codeCd === item.codeCd)
            item.fluctuationThreshold = thresholdList[index].fluctuationThreshold
            this.maxThresholdList.push({ codeCd: item.codeCd, maxThreshold: target.maxThreshold })
            item.maxThreshold = target.maxThreshold
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    maxThreshold(scope) {
      const threshold = this.maxThresholdList.find(item => item.codeCd === scope.codeCd)
      return threshold ? threshold.maxThreshold : 100000
    },
    submit() {
      let checkAll = true
      for (let i = 0; i < this.params.tagConfigJson.codeConfig.length; i++) {
        if (isNaN(this.params.tagConfigJson.codeConfig[i].fluctuationThreshold)) checkAll = false
      }
      if (!checkAll) {
        this.$message.error('波动阈值比例或个数不能为空！')
        return
      }
      this.$ajax({
        url: this.$ajax.setUrl('tag/tagDataBox/saveTagBoxConfig'),
        method: this.drawerType === 'add' ? 'post' : 'put',
        data: this.$ajax.setData({
          tagId: this.params.tagId,
          tagNm: this.params.tagNm,
          tagType: this.params.valueType,
          enumTag: this.params.enumTag,
          isDefaultValue: this.params.isDefaultValue,
          tagConfigJson: JSON.stringify(this.params.tagConfigJson)
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.msg)
          this.clearDrawer()
          this.$emit('clearDrawer')
          this.$emit('handleSubmit')
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    clearDrawer() {
      this.params = {}
      this.maxThresholdList = []
    }
  }
}
</script>

<style lang="scss">
.monitor-rule-threshold {
  .el-input-number__decrease,
  .el-input-number__increase {
    display: none;
  }
}
</style>
